/**
 * 留言板（react 组件形式）
 * 需求：
 * 板块一：添加留言
 *   1. 输入框
 *   2. 提交按钮
 * 板块二：显示留言列表
 *   清空按钮
 *   留言列表项
 *     1. 留言者
 *     2. 留言内容
 *     3. 留言时间
 *     4. 删除按钮
 * 逻辑要求：
 *  1. 输入框：输入内容
 *  2. 提交按钮：提交留言
 *  3. 清空按钮：清空留言
 *  4. 留言列表项：显示留言列表项
 *  5. 删除按钮：删除留言
 * 提示：
 *   输入框使用 tdesign-react 提供的 Input 组件, 导入方式为 import { Input } from 'tdesign-react'
 *   按钮使用 tdesign-react 提供的 Button 组件, 导入方式为 import { Button } from 'tdesign-react'
 *   留言列表使用 tdesign-react 提供的 List 组件, 导入方式为 import { List } from 'tdesign-react'
 *   留言列表项使用 tdesign-react 提供的 ListItem 组件, 导入方式为 const { ListItem } = List
 *   时间使用 new Date().toLocaleString()
 *
 * 提示：
 *   当前的 NoteBoard 组件没有展示到页面上，需要模仿 NineNineTable 组件展示到页面上
 *
 * 思路：
 */

// ctrl + 鼠标左键单击导入的模块， 我看了 但是看不懂，好
/**
 * export declare const Input declare 声明的意思，声明 Input的类型
 * 后面接了一个 InputProps props 还记得不嗯，当你用一个组件，然后要给这个组件传值，在这个组件里面，会用到这个props，
 * 比如，父组件 <Parent /> 里面的代码是 return <Child thisIsAValue />
 * 在子组件中 <Child /> 代码是 props == { thisIsAValue }，也就是说，你传什么类型的值由子组件决定，所以这个 InputProps 就是子组件所接收值的类型
 * export interface InputProps extends TdInputProps 这里的 interface 是接口的意思，也可以理解为声明，extends 继承，InputProps 继承了 TdInputProps
 *
 */
/**
     * 输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制
     */
    /**
     *
onChange?: (value: InputValue, context?: {
  e?: FormEvent<HTMLInputElement> | MouseEvent<any> | CompositionEvent<HTMLDivElement>;
  trigger: 'input' | 'initial' | 'clear';
}) => void;*/
import { useEffect, useState, Fragment } from 'react'
import { Button, Input, List, MessagePlugin, RadioGroup, Radio } from 'tdesign-react'
import { ApiRequest, apis } from '@/service'
import './index.less'

type UserType = {
  userName: string,
  userId: string,
}

const { ListItem } = List
const {
  practiceService: {
    getUserList,
  }
} = apis

const NoteBoard = () => {

  /**
   * 1.调用接口获取用户列表,渲染用户单选列表
   * 2.选择用户
   * 3.提交的时候像接口发送用户信息
   */

  // 存输入的值
  const [inputValue, setInputValue] = useState('')
  // 存输入的列表
  const [inputList, setInputList] = useState([{author:'qqq',text:'111',time:'2024/10/31 20:51'},{author:'qqq',text:'222',time:'2024/10/31 20:51'}])
  // 存用户列表
  const [userList, setUserList] = useState<UserType[]>([])

  useEffect(() => {
    getUserListFnc()
  }, [])

  /**
   * 获取用户列表
   */
  const getUserListFnc = () => {
    ApiRequest({ api: getUserList }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        setUserList(data)
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000,
        })
      }
    })
  }

  const onUserChange = (event: any) => {
    console.log('event', event)
  }

  const onSubmit = () => {
    let reg = /\S/
    if (reg.test(inputValue)) {
    // 当点击提交的时候要把 inputValue 的值放到 inputList 里面，有两种方式
    let _inputList = [...inputList] // 在这里定义变量可以保证每次都能获取到最新 的 inputList 嗯
    let curTime = new Date().toLocaleDateString() + '';
    // console.log(curTime)
    let inputObj = {
      author: 'qqq', //先不管作者
      text: inputValue,
      time: curTime
    }
    _inputList.push(inputObj) // 复杂类型的引用导致的，因为 inputList 是不可变类型，所以 _inputList 引用的 inputList 无法 push，当时看上去好像是push 上了，实际上没有
    setInputList(_inputList)

    //清空输入框？？？

    // 第二种方式
    // setInputList([...inputList, inputValue]) // 使用解构的方式，拿到 inputList 的值，然后用一个新数组返回，并且在这个数组的末尾，加上 inputValue嗯
    } else {
      alert('请输入文本')
    }
  }

  let onDeleteAll = () => {
    let _inputList = [...inputList]
    _inputList.splice(0,_inputList.length)
    setInputList(_inputList)
  }

  let onItemDelete = (itemIndex:number) => {
    let _inputList = [...inputList]
    _inputList.splice(itemIndex,1)
    setInputList(_inputList)
  }

  /**
   * 渲染输入的部分
   * @returns
   */
  const inputPart = () => {
    return <>
      <RadioGroup onChange={onUserChange}>
        {userList.map((item: UserType) => {
          return <Radio value={item.userId}>{item.userName}</Radio>
        })}
      </RadioGroup>
      <Input className="input" onChange={(value) => { setInputValue(value) }}
      />
      <Button onClick={onSubmit}>提交</Button>
      <Button onClick={onDeleteAll}>清空</Button>
    </>
  }

  /**
   * 渲染列表
   * @returns
   */
  const boardList = () => {
    return inputList.map((item,index) => {
      return <Fragment key={index}>
      <List className="list">
        <ListItem className="listItem">
          {item.text}
          <div className="central">
          {item.author}
          </div>
          <div className="right">
          {item.time}
          </div>
          <Button onClick={() => { onItemDelete(index) }}>删除</Button>
        </ListItem>
      </List>
    </Fragment>
    })
  }

  return <div className='note-board'>
    {inputPart()}
    {boardList()}
  </div>

}


export default NoteBoard
